import React, { useEffect, useState, useMemo, useRef } from 'react'
import { Scene, LineLayer, CityBuildingLayer, PointLayer, Popup } from '@antv/l7'
import { GaodeMap } from '@antv/l7-maps'
import './index.less'
import { DrawControl } from '@antv/l7-draw'
import RED_MARKER from "./redMarker.png"

const App = () => {
	const mapRef = useRef()
	const [mapScene, setMapScene] = useState(null)
	const [driving, setDriving] = useState(null)
	const [map, setMap] = useState(null)
	const [control, setControl] = useState(null)
	const [popupContainer, setPopupContainer] = useState(null)
	const [targetPoint, setTargetPoint] = useState(null)
	const _AMap = window.AMap

	useMemo(() => {
		console.log(mapRef.current)
	}, [])

	useEffect(() => {
		console.log(mapRef.current)
	}, [])

	useEffect(() => {
		if (!mapRef.current) return

		const map = new _AMap.Map('container', {
			viewMode: '3D',
			resizeEnable: true,
			center: [120.990864, 28.040421], //地图中心点
			zoom: 13, //地图显示的缩放级别
			plugins: [],
			layers: [],
			// layers: [new _AMap.TileLayer()],
		})

        // new _AMap.Polygon({
		// 	bubble: true,
		// 	fillOpacity: 0.2,
		// 	strokeWeight: 2,
		// 	path: [
		// 		[120.97733, 28.106199],
		// 		[120.982915, 28.112217],
		// 		[120.991372, 28.107732],
		// 		[120.987537, 28.103099],
		// 		[120.982993, 28.09922],
		// 	],
		// 	map: map,
		// })

		const scene = new Scene({
			id: 'container',
			map: new GaodeMap({
				mapInstance: map,
			}),
		})

		const control = new DrawControl(scene, {
			position: 'topright',
		})
		setControl(control)
		// scene.addControl(control)

		scene.on('loaded', async () => {
			// 实例化并添加插件
			const toolbar = new _AMap.ToolBar()
			const scale = new _AMap.Scale() // 比例尺
			// const overView = new _AMap.OverView() // 鹰眼

			scene.getMapService().map.addControl(toolbar)
			scene.getMapService().map.addControl(scale)
			// scene.getMapService().map.addControl(overView)

			const data = {
				type: 'FeatureCollection',
				features: [
					{
						type: 'Feature',
						properties: {},
						geometry: {
							type: 'Polygon',
							coordinates: [
								[
									[120.993461, 28.104046],
									[120.993464, 28.104178],
									[120.99323, 28.104003],
									[120.993137, 28.104122],
								],
							],
						},
					},
				],
			}

			const pointLayer = new CityBuildingLayer()
			pointLayer
				.source(data)
				.color('#FFFFFF')
				.size(10)
				.animate({
					enable: true,
				})
				.style({
					opacity: 1.0,
					baseColor: 'rgb(0, 0, 0, 0.2)',
					windowColor: 'rgb(30,60,89)',
					brightColor: 'rgb(255,176,38)',
				})
			// scene.addLayer(pointLayer)

			const flydata = {
				type: 'FeatureCollection',
				features: [
					{
						type: 'Feature',
						properties: {},
						geometry: {
							type: 'LineString',
							coordinates: [
								[120.9827220439911, 28.105080126296052],
								[120.9792995452881, 28.102231500802763],
							],
						},
					},
					{
						type: 'Feature',
						properties: {},
						geometry: {
							type: 'LineString',
							coordinates: [
								[120.9827220439911, 28.105080126296052],
								[120.98106980323793, 28.10205168469564],
							],
						},
					},
					{
						type: 'Feature',
						properties: {},
						geometry: {
							type: 'LineString',
							coordinates: [
								[120.9827220439911, 28.105080126296052],
								[120.98164916038513, 28.10184820821103],
							],
						},
					},
					{
						type: 'Feature',
						properties: {},
						geometry: {
							type: 'LineString',
							coordinates: [
								[120.9827220439911, 28.105080126296052],
								[120.963586, 28.113794],
							],
						},
					},
				],
			}

			// const flyLine = new LineLayer()
			// 	.source(flydata)
			// 	.color('#338feb')
			// 	// .shape('arc3d')
			// 	.shape('arc3d')
			// 	.size(2)
			// 	.active(true)
			// 	.animate({
			// 		interval: 2,
			// 		trailLength: 2,
			// 		duration: 1,
			// 	})
			// 	.style({
			// 		opacity: 1,
			// 	})
			//
			// scene.addLayer(flyLine)

			const dotData = {
				type: 'FeatureCollection',
				features: [
					{
						type: 'Feature',
						properties: {},
						geometry: {
							type: 'Point',
							coordinates: [120.990864, 28.040421],
						},
					},
					{
						type: 'Feature',
						properties: {},
						geometry: {
							type: 'Point',
							coordinates: [120.98105370998383, 28.102065880715063],
						},
					},
					{
						type: 'Feature',
						properties: {},
						geometry: {
							type: 'Point',
							coordinates: [120.98163843154907, 28.101838744179084],
						},
					},
					{
						type: 'Feature',
						properties: {},
						geometry: {
							type: 'Point',
							coordinates: [120.98272740840912, 28.105084858169157],
						},
					},
					{
						type: 'Feature',
						properties: {},
						geometry: {
							type: 'Point',
							coordinates: [120.963586, 28.113794],
						},
					},
				],
			}

			// const dotPoint = new PointLayer()
			// 	.source(dotData)
			// 	.shape('circle')
			// 	.color('#abc7e9')
			// 	.animate({
			// 		speed: 0.8,
			// 	})
			// 	.size(30)
			// 	.style({
			// 		opacity: 1.0,
			// 	})

            scene.addImage('marker', RED_MARKER);
            const dotPoint = new PointLayer()
                .source(dotData)
                .shape('marker')
                .size(12)

            dotPoint.active(true)
			scene.addLayer(dotPoint)

            dotPoint.on('click', (target) => {
                const { lngLat } = target
                setTargetPoint(lngLat)
            })

            const popup = new Popup();
            popup.setLnglat([120.990864, 28.040421 + 0.002 ]);
            popup.setText('hello world');
            scene.addPopup(popup);
            setPopupContainer(popup)

		})

		scene.on('click', (target) => {
			// const { lnglat } = target
			// console.log([lnglat.lng, lnglat.lat])
		})
	}, [mapRef])

    useEffect(() => {
        if (popupContainer && targetPoint) {
            popupContainer.setLnglat([targetPoint.lng, targetPoint.lat])
            popupContainer.setText('hello amin');
            popupContainer.open()
        }
    }, [targetPoint, popupContainer])

	const getDrawData = () => {
		const datas = control.getAllData()
		console.log(datas)
	}

	return (
		<div className={'mapBox'}>
			<div id={'container'} className={'container'} ref={mapRef} />
			{/*<div id="panel" className={'panel'} />*/}
			{/*<button onClick={getDrawData}>获取绘制内容</button>*/}
		</div>
	)
}

export default App
